<template>
  <div class="beauty-junior">
    <div class="head"></div>
    <div v-show="itemNum" class="buttonset" v-click="onSelect">
      <a href="javascript:void(0)" data-index="0" :class="{active:showIndex===0}">组周冠军</a><a href="javascript:void(0)" v-for="(d,i) of staredStudents" :key="i+1" :data-index="i+1" :class="{active:showIndex===i+1}">{{d.star_name.trim().substr(0,4)}}</a>
    </div>

    <div v-show="itemNum" class="star-conts">
      <!-- <transition-group :name="showType?'zoom-in':'zoom-out'"
                        :enter-active-class="'transition-active'"
                        :leave-active-class="'transition-active'"> -->
      <div v-show="showIndex===0" :key="0" class="s-item">
        <div class="tp">
          <p><img :src="groupWeekWinner.win_url"></p>
          <span>{{groupWeekWinner.group_name}}</span>
        </div>
        <dl class="des">
          <dt>成员：</dt>
          <dd v-for="(name, i) of groupWeekWinner.student_names" :key="i">{{name}}</dd>
        </dl>
      </div>
      <div v-for="(d,i) of staredStudents" v-show="showIndex===i+1" :key="i+1" class="s-item">
        <div class="tp">
          <p><img :src="d.url"></p>
          <span>{{d.student_name}}</span>
        </div>
        <div class="des">{{d.describe}}</div>
      </div>
      <!-- </transition-group> -->
    </div>
  </div>
</template>

<script>
  import Timer from '@/modules/corejs/time/timer'
  export default {
    props: {
      adonises: {
        type: Object,
        default () { return {} }
      }
    },
    data () {
      return {
        showIndex: 0,
        showType: 0
      }
    },
    computed: {
      groupWeekWinner () {
        let groupWeekWinner = this.adonises.group_week_winner || {}
        groupWeekWinner.student_names = (groupWeekWinner.student_names || '').split(',')
        return groupWeekWinner
      },
      staredStudents () {
        // 限制只有2个
        let staredStudents = this.adonises.stared_students || []
        if (staredStudents.length > 2) {
          staredStudents.length = 2
        }
        return staredStudents
      },
      itemNum () {
        let first = this.groupWeekWinner.group_name ? 1 : 0
        return first + this.staredStudents.length
      }
    },
    watch: {
      adonises () {
        this.timerUpdate()
      }
    },
    mounted () {
      this.timerInit()
    },
    methods: {
      onSelect (e) {
        let index = e.target.dataset.index
        if (index) {
          let {showIndex} = this
          if (showIndex > index) {
            this.showType = 0
          } else {
            this.showType = 1
          }
          this.showIndex = index * 1
          this.timerStart()
        }
      },
      timerInit () {
        this.timer = new Timer({
          callBack: this.timeExcu,
          time: 6000
        })
        this.timerStart()
      },
      timerUpdate () {
        this.showIndex = 0
        this.timerStart()
      },
      timerStart () {
        this.timer.stop()
        if (this.itemNum > 1) this.timer.start()
      },
      timeExcu () {
        let {showIndex} = this
        if (++showIndex >= this.itemNum) {
          showIndex = 0
        }
        this.showIndex = showIndex
      }
    }
  }
</script>

<style scoped>
  .transition-active{
    width: 100%;
    transition: 0.4s ease;
  }
  .beauty-junior {
    position: relative;



  }
  .des{
    line-height: 35px;
    font-size: 24px;
    width: 270px;
    margin-left: 30px;
    color: #666;
    max-height: 140px;
    overflow: hidden;

    dt{
      color: #50ce81;
    }
    dd{
      float: left;
      width: 50%;
    }
    dd:nth-child(2n+1) {
      padding-left: 36px;
      box-sizing: border-box;
    }
  }

  .head {
    width: 300px;
    height: 60px;
    margin-left: 10px;
    background-image: url(@/components/temp4/imgs/star.png);
    background-size: 100% auto;
  }
  .buttonset {
    width: 270px;
    height: 65px;
    margin-left: 25px;
    margin-bottom: 10px;
    text-align: center;
  }
  .buttonset a {
    display: inline-block;
    text-align: center;
    border: solid 1Px #eee;
    font-size: 26px;
    vertical-align: middle;

    color: #999;

    box-sizing: border-box;
    height: 77px;
    width: 90px;
    padding: 5px 10px 0;

    &.active {
      background-color: #34c7eb;
      color: #fff;
    }
  }
  .tp {
    text-align: center;
    margin-bottom: 10px;

    font-size: 26px;
    color: #4fceee;
    padding-top: 18px;
  }
  img {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    box-shadow: 0 0 12px #7E7E7E;
  }

</style>
